import React from 'react';
import { Route } from 'react-router-dom';
import DashBoard from '../dashBoard';
import Collect from '../sip/collect';
import DefectWrite from '../sip/defectWrite';
import style from './index.less';
import { Layout, Menu, Icon } from 'antd';

const { Header, Sider, Content } = Layout;
const { Item, SubMenu } = Menu;

const routes = [
    {
        path: '/home/dashboard',
        component: DashBoard
    },
    {
        path: '/home/sip/collect',
        component: Collect
    },
    {
        path: '/home/sip/defectWrite',
        component: DefectWrite
    }
]

class Home extends React.Component {
    state = {
        collapsed: false
    }
    toggle = () => {
        this.setState( {
            collapsed: !this.state.collapsed
        } );
        this.triggerResize();

    }

    triggerResize = () => {

        if ( Event.prototype.initEvent ) {
            const evt = window.document.createEvent( 'UIEvents' );
            evt.initUIEvent( 'resize', true, false, window, 0 );
            window.dispatchEvent( evt );
        }
        else {
            window.dispatchEvent( new Event( 'resize' ) );
        }

    }

    handleMenu = ( { item, key, keyPath } ) => {
        if ( key === this.props.location.pathname ) {
            return;
        }

        this.props.history.push( key );
    }

    render() {

        return (
            <Layout className={style.myAntLayout}>
                <Header>
                    头部
                </Header>
                <Layout className={style.contentBody}>
                    <Sider className={style.menuSider} trigger={null} collapsible collapsed={this.state.collapsed}>
                        <Icon className={`${style.toggleBtn} ${this.state.collapsed ? style.center : style.right}`}
                              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} onClick={this.toggle}></Icon>
                        <Menu theme='dark' mode='inline' defaultSelectedKeys={[ '1' ]} onClick={this.handleMenu}>

                            <Item key='/home/dashboard'>
                                <Icon type='user'></Icon>
                                <span>报表</span>
                            </Item>
                            <SubMenu key='2' title={
                                <span>
                                    <Icon type='appstore'></Icon>
                                    <span>SIP站点管理</span>
                                </span>
                            }>
                                <Item key='/home/sip/collect'>
                                    <Icon type='user'></Icon>
                                    <span>数据采集</span>
                                </Item>
                                <Item key='/home/sip/defectWrite'>
                                    <Icon type='user'></Icon>
                                    <span>缺陷录入</span>
                                </Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Content className={style.myContent}>
                        {routes.map( ( route, index ) => (
                            <Route key={index} path={route.path} component={route.component}/>
                        ) )}

                    </Content>
                </Layout>
            </Layout>
        )
    }
}

export default Home;